<template>
	<view class="box">
		<Title name="排行榜"></Title>
		
		<view class="tage">
			<view class="item" @click="now=0">
				<text :class="[now===0 ?'active' :'']">
					公益积分榜
				</text>
			</view>
			
			<view class="item" @click="now=1">
				<text :class="[now===1 ?'active' :'']">优秀社团榜</text>
			</view>
		</view>
		
		<view class="first" v-if="now===0">
			
			<view class="content">
				<view class="tt">
					<text class="sort">排名</text>
					<text class="middle">用户</text>
					<text class="lj">累计公益积分</text>
				</view>
				
				<view class="item" :class="[index < 3 ?'front' :'']" v-for="(item, index) in pointSort">
					<text class="sort">{{index+1}}</text>
					<view class="middle">
						<image :src="item.img" mode=""></image>
						<text>{{item.title}}</text>
					</view>
					<text class="lj">{{item.count}}</text>
				</view>
			</view>
		</view>
		
		<view class="second" v-if="now===1">
		
			<view class="content">
				<view class="tt">
					<text class="sort">排名</text>
					<text class="middle">社团</text>
					<text class="lj">累计发起活动</text>
				</view>
				
				<view class="item" :class="[index < 3 ?'front' :'']" v-for="(item, index) in comSort">
					<text class="sort">{{index+1}}</text>
					<view class="middle">
						<image :src="item.img" mode=""></image>
						<text>{{item.title}}</text>
					</view>
					<text class="lj">{{item.count}}</text>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	import Title from "../components/title.vue"
	export default {
		data () {
			return {
				now: 0,
				pointSort: [],
				comSort: []
			}
		},
		components: {
			Title
		},
		async created () {
			let res = await uni.request({
				url: this.$config.basisIP,
				method: "POST",
				data: {
					fun: "query",
					query_type: "leaderboard",
					leaderboard: "1"
				},
				header: {
					"content-type": "application/x-www-form-urlencoded"
				}
			})
			
			this.pointSort = res[1].data.result
			
			res = await uni.request({
				url: this.$config.basisIP,
				method: "POST",
				data: {
					fun: "query",
					query_type: "leaderboard",
					leaderboard: "2"
				},
				header: {
					"content-type": "application/x-www-form-urlencoded"
				}
			})
			
			this.comSort = res[1].data.result
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		min-height: 100vh;
		background-color: #fff;
		
		.tage {
			width: 699rpx;
			height: 83rpx;
			border-radius: 5px;
			background-color: rgba(112, 112, 112, 0.09);
			display: flex;
			margin: 20rpx auto;
			
			.item {
				flex: 1;
				text-align: center;
				
				text {
					font-size: 25rpx;
					color: $subColor;
				}
				
				.active {
					color: #FF7272;
					position: relative;
					
					&::after {
						content: "";
						position: absolute;
						left: 0;
						right: 0;
						bottom: -20rpx;
						box-sizing: border-box;
						padding: 0 10rpx;
						height: 2px;
						background-color: #FF7272;
					}
				}
			}
			
			
		}

		.content {
			font-size: 25rpx;
			.tt {
				display: flex;
				
				.sort {
					flex: 1;
					margin-left: 25rpx;
				}
				
				.middle {
					flex: 3;
				}
				
				.lj {
					flex: 1.2;
					margin-right: 25rpx;
				}
			}
			
			.item {
				font-size: 40rpx;
				display: flex;
				align-items: center;
				
				.sort {
					flex: 1;
					margin-left: 25rpx;
				}
				
				.middle {
					flex: 3;
					font-size: 25rpx;
					display: flex;
					align-items: center;
					image {
						width: 90rpx;
						height: 90rpx;
						border-radius: 50%;
					}
					
					text {
						margin-left: 25rpx;
					}
				}
				
				.lj {
					flex: 1.2;
					text-align: center;
					margin-right: 25rpx;
				}
			}
			
			.front {
				color: #FF2525;
			}
		}
	}
</style>
